<template>
  <div class="detail">
    <van-icon name="arrow-left" class="goBack" @click="fn_goBack"/>
    <div class="deta-slide">
      <van-swipe @change="onChange">
        <van-swipe-item v-for="(item,index) in lis.imgArray" :key="index">
          <img :src="item" alt="" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ active + 1 }}/{{len}}</div>
        </template>
      </van-swipe>
    </div>
    <div class="box">
      <div class="price">
        <div>
          <span class="now">￥<b>{{lis.newPrice}}</b>起</span>
          <span class="old">￥{{lis.oldPrice}}</span>
        </div>
        <div>已拼{{lis.noeCount}}件</div>
      </div>
      <div class="xq">{{lis.title}}</div>
      <ul class="rights">
        <li v-for="(item,index) in lis.service" :key="index">{{item}}</li>
      </ul>
      <div>
        <van-goods-action>
          <van-goods-action-icon
            icon="chat-o"
            text="客服"
            @click="onClickIcon"
          />
          <van-goods-action-icon
            icon="like-o"
            text="收藏"
            @click="onClickIcon"
          />
          <van-goods-action-icon
            icon="shopping-cart-o"
            @click="onClickIcon"
          ><a href="./cart.html">购物车</a>
          </van-goods-action-icon>
          <van-goods-action-button
            type="danger"
            text="立即加入购物车"
            @click="onClickButton(lis)"
          />
        </van-goods-action>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

// import { Toast } from "vant";
export default {
  name: "Detail",
  data() {
    return {
      lis: {},
      shops: [],
      active:0,
      len:0
    };
  },
  created() {
    this.fn_getData(this.fn());
  },
  methods: {
    fn() {
      let aa = location.search.split("?")[1];
      let bb = aa.split("&");
      let obj = {};
      bb.forEach((item) => {
        let [k, v] = item.split("=");
        Reflect.set(obj, k, v);
      });
      return obj;
    },
    fn_goBack(){
      window.history.back(-1)
    },
    async fn_getData(obj) {
      let {classId,productId} = obj;
      let { data } = await axios.get("/pdd.json");
      let datas = data.home.product;
      let classList = datas.find(item => {
          return item.id == classId
      })

      let product = classList.productList.find(item => {
          return item.productId == productId;
      })
      this.lis = product;
      this.len = this.lis.imgArray.length
    },
    onClickIcon() {
      
    },
    onClickButton(product) {
       let str = null;
        if (localStorage.getItem("pdd") == null) {
        str = new Map();
      } else {
        str = new Map(Object.entries(JSON.parse(localStorage.getItem("pdd"))));
      }
      if(str.has(product.productId)){
        str.get(product.productId).count++;
      }else {
          product.count = 1;
          str.set(product.productId,product)
      }
      localStorage.setItem("pdd", JSON.stringify(Object.fromEntries(str)));
      console.log(str);
    },
    onChange(index) {
      this.active = index;
    },
  },
};
</script>

<style scoped>
.detail {
  width: 7.5rem;
  position: relative;
}
.detail .goBack {
  position: absolute;
  top:5px;
  left:5px;
  font-size: .48rem;
  z-index: 999;
  font-weight: 700;
}
.van-swipe-item{
    width:100%;
    height:100%;

}
.van-swipe-item img{
    width:100%;
    height:100%;
}
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: .32rem;
    font-weight: bold;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
  }
.deta-slide {
  width: 7.5rem;
  /* height: 7.74rem; */
  background: gray;
}
.detail .box {
  width: 100%-0.52rem;
  padding: 0 0.26rem;
}
.detail .price {
  display: flex;
  flex: nowrap;
  font-size: 0.24rem;
  justify-content: space-between;
  margin: 0.32rem 0;
}
.detail .price .now b {
  font-size: 0.42rem;
}
.detail .price .now {
  color: #cf3225;
  margin-right: 0.1rem;
}
.detail .price .old {
  text-decoration: line-through;
  color: #58595b;
}
.detail .box .xq {
  font-size: 0.36rem;
  line-height: 0.48rem;
  font-weight: bold;
}
.rights {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.24rem;
  color: #58595b;
}
.rights li {
  padding: 0.26rem 0.16rem;
}
</style>